<template>
	<div class="container">
		<!-- 创建按钮 -->
		<div class="btndiv">
			<el-button v-blur class="added" @click="createMenu">创建</el-button>
		</div>
		<!-- 列表展示 -->
		<div class="tableDiv">
			<el-table :data="tableData" highlight-current-row style="border-radius: 6px" :header-cell-style="{
				color: '#333333', fontFamily: 'PingFang SC', fontSize: '14px', fontWeight: 500, background: '#F4F8FF',
				borderBottom: '1px solid #B9DAF2',  textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
				:tree-props="{children: 'sysMenuVoChild'}" row-key="id">
				<el-table-column prop="menuName" label="菜单名称" width="300" class-name="left"></el-table-column>
				<el-table-column prop="menuIcon" label="图标" width="250">
					<template slot-scope="scope">
						<div v-if="scope.row.resourceType == 'module' && scope.row.menuIcon" class="levelImg">
							<el-image :src="require('@/'+scope.row.menuIcon)" alt=""></el-image>
						</div>
						<div v-else-if="scope.row.resourceType == 'url'" class="levelImg">
							<i class="el-icon-folder iconfont"></i>
						</div>
						<div v-else class="levelImg">
							<i class="el-icon-s-fold iconfont"></i>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="resourceType" label="类型" width="50">
					<template slot-scope="scope">
						<span v-if="scope.row.resourceType === 'module'" size="small">目录</span>
						<span v-else-if="scope.row.resourceType === 'url'" size="small" type="success">菜单</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderBy" label="排序号" width="60"></el-table-column>
				<el-table-column prop="resourceUrl" label="菜单URL" show-overflow-tooltip></el-table-column>
				<el-table-column prop="permission" label="请求资源" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="130">
					<template slot-scope="scope">
						<el-button v-blur size="mini" type="warning" plain @click="editMenu(scope.row)">修改</el-button>
						<el-button v-blur size="mini" type="danger" plain @click="delMenu(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!--新建、修改-->
		<el-dialog :title="title" :visible.sync="menu" :close-on-click-modal="false" @close="cancelMenu">
			<el-form ref="form" :model="form" label-width="20%" style="height: 300px; overflow-x: hidden;"
				:rules="rules">
				<el-form-item label="菜单名称" prop="menuName">
					<el-col :span="16">
						<el-input size="small" v-model="form.menuName" placeholder="菜单名称"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="上级菜单" prop="parentStr">
					<el-col :span="16">
						<el-input size="small" v-model="parentStr" placeholder="上级菜单" @focus="openMenu"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="类型" prop="resourceType">
					<el-col :span="16">
						<el-select :popper-append-to-body="false" v-model="form.resourceType" placeholder="请选择" clearable>
							<el-option label="module(目录)" value="module"></el-option>
							<el-option label="url(菜单)" value="url"></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item label="菜单URL" prop="resourceUrl">
					<el-col :span="16">
						<el-input size="small" v-model="form.resourceUrl" placeholder="菜单URL"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="请求资源" prop="permission">
					<el-col :span="16">
						<el-input size="small" v-model="form.permission" placeholder="请求资源"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="排序号" prop="orderBy">
					<el-col :span="16">
						<el-input size="small" v-model="form.orderBy" placeholder="排序号"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="图标" prop="menuIcon">
					<el-col :span="16">
						<el-input size="small" v-model="form.menuIcon" placeholder="菜单图标"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="是否显示" prop="isShow">
					<el-col :span="8">
						<el-select :popper-append-to-body="false" size="small" v-model="form.isShow" placeholder="请选择" clearable>
							<el-option v-for="item in isShowOptions" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-col>
				</el-form-item>
			</el-form>
			<div class="center">
				<el-button v-blur class="added" @click="onSubmit" :loading="loadBtn">提交</el-button>
				<el-button v-blur class="query" @click="cancelMenu">取消</el-button>
			</div>
		</el-dialog>
		<!-- 选择菜单 -->
		<el-dialog title="选择菜单" :visible.sync="selectMenu" width="40%" style="margin-top: -30px;"
			:close-on-click-modal="false">
			<el-tree v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading"
				style="height: 400px; overflow-x: hidden;" :data="tableData" :props="props" highlight-current
				node-key="id" :default-expanded-keys="['0']" ref="tree" @node-click="getCheckedNodes">
				<span slot-scope="{node, data}">
					<span>
						<img v-if="node.childNodes.length" src="@/static/img/tree.png"
							style="margin-right: 5px;" />{{ node.label }}
					</span>
				</span>
			</el-tree>
			<div class="center">
				<el-button v-blur class="added" @click="certain">提交</el-button>
				<el-button v-blur class="query" @click="cancel">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import api from '@/api/getResult.js'
	import '@/assets/queryPublic.css'
	export default {
		name: 'sysMenu',
		data() {
			return {
				keys: [],
				listLoading: false,
				loading: true,
				loadBtn: false,
				menu: false, //新增修改菜单
				isEdit: false,
				isShowOptions: [{
						value: 1,
						label: '是'
					},
					{
						value: 0,
						label: '否'
					}
				],
				title: '新增',
				tableData: [{
					menuName: '一级菜单',
					id: '0',
					sysMenuVoChild: []
				}], //菜单
				props: {
					label: 'menuName',
					children: 'sysMenuVoChild'
				},
				select: '', //选择父级
				parentStr: '一级菜单',
				form: {
					resourceType: '',
					menuName: '',
					parentId: '0',
					resourceUrl: '',
					permission: '',
					orderBy: '0',
					menuIcon: '',
					isShow: 1
				},
				selectMenu: false,
				rules: {
					menuName: [{
						message: '菜单名称不可为空',
						required: true,
						trigger: 'blur'
					}],
					// parentStr: [{
					// 	message: '上级菜单不可为空',
					// 	required: true,
					// 	trigger: 'blur'
					// }],
					resourceType: [{
						message: '类型不可为空',
						required: true,
						trigger: 'blur'
					}],
				},
			};
		},
		created() {
			this.getResult()
		},
		methods: {
			eppandRow(row) {
				this.$refs.table.toggleRowExpansion(row)
			},
			// 获取菜单
			getResult() {
				let param = {
					token: window.sessionStorage.getItem('token')
				}
				this.listLoading = true
				api.querySysMenuList(param).then(res => {
					this.listLoading = false
					this.loading = false
					this.tableData = res.data;
				}).catch(err => {});
			},
			// 新建
			createMenu() {
				this.menu = true
				this.title = '新建菜单'
				this.form.id = ''
			},
			// 新建、修改
			async onSubmit() {
				// if (!await this.$FormCheck('form')) {
				// 	this.$message.error("请您认真填写内容")
				// 	return;
				// }
				this.loadBtn = true
				api.addOrUpdateMenu(this.form).then(res => {
					this.loadBtn = false
					if (res.data.code == '0001') {
						this.$message({
							message: res.data.message,
							type: "success"
						});
						this.cancelMenu()
						this.getResult()

					} else {
						this.$message({
							message: res.data.message,
							type: "error"
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			cancelMenu() {
				// this.getResult()
				this.menu = false
				this.isEdit = false
				this.form.menuName = ''
				this.form.menuIcon = ''
				this.form.resourceType = ''
				this.form.resourceUrl = ''
				this.form.permission = ''
				this.form.parentId = '0'
				this.parentStr = '一级菜单'
			},
			// 修改
			editMenu(row) {
				this.menu = true
				this.title = '修改菜单'
				let data = JSON.stringify(row)
				this.form = JSON.parse(data)
				if (row.parentStr) {
					this.parentStr = row.parentStr
				}
				if (row.resourceType) {
					this.isEdit = true
				}
			},
			// 打开菜单
			openMenu() {
				this.selectMenu = true;
			},
			// 选择菜单
			getCheckedNodes(val) {
				this.select = val
			},
			certain() {
				this.form.parentId = this.select.id;
				this.parentStr = this.select.menuName;
				this.cancel()
			},
			cancel() {
				this.selectMenu = false;
				// this.getMenu()
			},
			tabHeader() {
				return "backgroundColor:#f5f6fa;color:#090909;text-align:center;";
			},
			delMenu(row) {
				this.$confirm("确认要删除么？").then(res => {
					const param = {
						id: row.id
					}
					api.deleteById(param).then(res => {
							if (res.data.code === "0001") {
								this.$message({
									message: res.data.message,
									type: "success"
								});
								this.getResult();
							} else {
								this.$message({
									message: res.data.message,
									type: "error"
								});
							}
						})
						.catch(err => {
							console.log(err);
						});
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	/* 滚动条 */
	::-webkit-scrollbar {
		width: 8px;
		height: 100%;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #F4F8FF;
		box-shadow: inset 0 0 5px #F4F8FF;
		background: #F4F8FF;
	}

	.btndiv {
		text-align: left;
	}

	.el-form-item--mini.el-form-item,
	.el-form-item {
		margin-bottom: 10px;
	}

	/deep/td.left .cell {
		text-align: left;
		margin-left: 40px;
	}

	.levelImg {
		width: 25px;
		height: 25px;
		margin: 0 auto;
	}

	.iconfont {
		font-size: 20px;
	}

	/deep/.el-form-item__error {
		display: block;
		line-height: 0;
	}

	/deep/.el-form-item__label {
		line-height: 35px;
	}

	/deep/.el-col {
		margin-bottom: 10px;
	}
	
	/deep/ .el-select-dropdown {
	    position: absolute !important;
	    top: 50px !important;
	    left: 0 !important;
	 }
</style>
